<template>
<div class="topMenu">
  <div class="menuBox">
    <div @click="handlerClick(item)" :class="['label',{active:item.routerList.includes($route.name) || item.routerList.includes($route.query.columnId)}]" v-for="(item,index) in menuList" :key="index">
      <span class="title">{{item.title}}</span>
      <span class="line"></span>
    </div>
  </div>
  <div class="tianqi">
<!--    <i class="el-icon-sunny"></i>-->
<!--    <span>江西   25-32℃   微风</span>-->
  </div>
</div>
</template>

<script>
export default {
  name: "topMenu",
  computed:{
    menuList(){
      return this.$store.getters.menuList
    },
  },
  methods:{
    handlerClick(item){
      if(item.icon == 1){
        this.$router.push({name:item.name})
      }else{
        this.$router.push({name:'newsList',query:{columnId:item.columnId}})
      }
    },
    getMenusByLogin() {
      this.$api.getMenusByLogin().then((res) => {
        let menuList = res.data.childMenusTreeVO;
        menuList.forEach(x=>{
          if(x.icon == 1){
            if(x.childMenusTreeVO && x.childMenusTreeVO.length!=0){
              x.name = x.childMenusTreeVO[0].name
              x.routerList = x.childMenusTreeVO.map(y=>y.name)
            }else{
              x.routerList= [x.name]
            }
          }else{
            x.name = 'newsList'
            if(x.childMenusTreeVO && x.childMenusTreeVO.length!=0){
              x.childMenusTreeVO.sort((a,b)=>{ return a.columnId - b.columnId })
              x.columnId = x.childMenusTreeVO[0].columnId
              x.routerList = x.childMenusTreeVO.map(y=>y.columnId)
              x.childMenusTreeVO = x.childMenusTreeVO.map(y=>{
                return {
                  ...y,
                  name:'newsList',
                }
              })
            }else{
              x.routerList= [x.columnId]
            }
          }

        })
        this.$store.dispatch('setMenuList',menuList)
      });
    },
  },
  mounted() {
    this.getMenusByLogin()
  },
  data(){
    return {
    }
  },
}
</script>

<style scoped lang="less">
.topMenu{
  width: calc(100% - 40px);
  height: 8rem;
  background: #3772FF;
  // background-image: #3772FF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  .tianqi{
    color: white;
    display: flex;
    font-size: 1.8rem;
    align-items: center;
    i{
      font-size: 2.6rem;
      margin-right: 10px;
    }
  }
  .menuBox{
    margin-left: 30px;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 1.6rem;
    color: #FFFFFF;
    .label{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      //font-size: 2.1rem;
      font-size: 2.2rem;
      margin-right: 30px;
      margin-left: 10px;
      //min-width: 90px;
      height: 60px;
      cursor: pointer;
      &:hover{
        .line{
          width: 100%;
        }
      }
      .title{
        margin-top: 10px;
      }
      .line{
        width: 0px;
        height: 2px;
        background-color: white;
        transition: all 0.3s;
        margin-top: 10px;
      }

    }
    .active{
      .line{
        width: 100%;
      }
    }
  }
}
</style>
